import React, { Component } from 'react';
import { AppOutline, UnorderedListOutline, UserOutline, HandPayCircleOutline } from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'
import { withRouter } from 'react-router-dom';


class Tabbar extends Component {

    render() {
        const tabs = [
            {
                key: '/index/home',
                title: '首页',
                icon: <AppOutline />,
            },
            {
                key: '/index/gong',
                title: '攻略',
                icon: <UnorderedListOutline />,
            },
            {
                key: '/index/jiudian',
                title: '我的',
                icon: <HandPayCircleOutline />,
            },
            {
                key: '/index/my',
                title: '个人中心',
                icon: <UserOutline />,
            },
        ]
        return (
            <div className='tabbar'>
                <TabBar activeKey={this.props.location.pathname} onChange={(value) => {
                    // console.log(value);
                    // console.log(this.props.location.pathname);
                    // console.log(this.props);
                    this.props.history.push(value)
                }}>

                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                    ))}
                </TabBar>
            </div>
        );
    }
}

export default withRouter(Tabbar);